<template>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input placeholder="请输入订单号" v-model="searchParams.orderNo" />
      </el-col>

      <el-col :span="6">
        <el-select placeholder="订单状态" v-model="searchParams.status">
          <el-option label="全部" :value="1"></el-option>
          <el-option label="进行中" :value="2"></el-option>
          <el-option label="已完成" :value="3"></el-option>
          <el-option label="异常" :value="4"></el-option>
        </el-select>
      </el-col>

      <el-col :span="6">
        <el-input placeholder="设备编号" v-model="searchParams.no"></el-input>
      </el-col>

      <el-col :span="6">
        <el-button type="primary" @click="loadData">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>

      <el-col :span="6" style="margin-top: 20px">
        <el-input placeholder="请输入站点名称" v-model="searchParams.name">
        </el-input>
      </el-col>
      <el-col :span="6" style="margin-top: 20px">
        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="/"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
          @change="handleChange"
        />
      </el-col>
    </el-row>
  </el-card>

  <el-card style="margin-top: 20px">
    <el-button
      type="danger"
      :disabled="!selectionList.length"
      @click="handleBatchDelete"
      >批量删除</el-button
    >
    <el-button
      type="primary"
      icon="Download"
      :disabled="!selectionList.length"
      @click="exportToExcel()"
      >导出订单数据到Excel</el-button
    >
  </el-card>

  <el-card style="margin-top: 20px">
    <el-table
      :data="dataList"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column label="订单号" prop="orderNo"></el-table-column>
      <el-table-column label="设备编号" prop="equipmentNo"></el-table-column>
      <el-table-column label="订单日期" prop="date"></el-table-column>
      <el-table-column label="开始时间" prop="startTime"></el-table-column>
      <el-table-column label="结束时间" prop="endTime"></el-table-column>
      <el-table-column label="金额" prop="money"></el-table-column>
      <el-table-column label="支付方式" prop="pay"></el-table-column>
      <el-table-column label="订单状态" prop="status">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.status == 2">进行中</el-tag>
          <el-tag type="primary" v-else-if="scope.row.status == 3"
            >已完成</el-tag
          >
          <el-tag type="warning" v-else-if="scope.row.status == 4">异常</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handelDetail(scope.row.orderNo)"
            >详情</el-button
          >
          <el-button type="danger" size="small" @click="handelDelete"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pageInfo.page"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="display: flex;justify-content: flex-end;margin-top: 15px;background"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useHttp } from "@/hooks/useHttp";
import type { Ref } from "vue";
import { batchDeleteApi } from "@/api/operation";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { useTabsStore } from "@/store/tabs";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
const date = ref([]);

interface SearchParamsType {
  orderNo: string;
  status: number;
  no: string;
  name: string;
  startDate: string;
  endDate: string;
}

const searchParams: Ref<SearchParamsType> = ref({
  orderNo: "",
  status: 1,
  no: "",
  name: "",
  startDate: "",
  endDate: "",
});
const handleChange = (val: string[]) => {
  searchParams.value.startDate = val[0];
  searchParams.value.endDate = val[1];
};

const {
  dataList,
  loading,
  totals,
  pageInfo,
  loadData,
  handleSizeChange,
  handleCurrentChange,
  resetPagination,
} = useHttp("orderList", searchParams);

const handleReset = () => {
  date.value = [];
  searchParams.value = {
    orderNo: "",
    status: 1,
    no: "",
    name: "",
    startDate: "",
    endDate: "",
  };
  resetPagination();
};

const selectionList = ref([]);
const handleSelectionChange = (selection: any) => {
  selectionList.value = selection;
};

const handleBatchDelete = async () => {
  try {
    const res = await batchDeleteApi(
      selectionList.value.map((item: any) => item.orderNo)
    );
    if (res.code === 200) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      loadData();
    }
  } catch {
    ElMessage({
      message: "删除失败",
      type: "error",
    });
  }
};
const Router = useRouter();

const tabsStore = useTabsStore();
const { addTab, setActiveTab } = tabsStore;
const handelDetail = (orderNo: string) => {
  addTab("订单详情", "/operations/detail", "Share");
  setActiveTab("订单详情", "/operations/detail");
  Router.push("/operations/detail?orderNo=" + orderNo);
};

const router = useRoute();
watch(
  () => router.name,
  (to, from) => {
    if (to == "orders" && from != "detail") {
      loadData();
    }
  }
);

const exportToExcel = () => {
  const ws = XLSX.utils.json_to_sheet(selectionList.value); //把数据转成工作表格式
  const wb = XLSX.utils.book_new(); //创建新的工作簿
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); //工作簿加到工作表中
  const wbout = XLSX.write(wb, { bookType: "xlsx", type: "array" });
  const blob = new Blob([wbout], { type: "application/octet-stream" });
  saveAs(blob, "导入的数据.xlsx");
};

const handelDelete = () => {
  setTimeout(() => {
    ElMessage({
      message: "删除成功",
      type: "success",
    });

    loadData(); // 执行后续操作如刷新数据
  }, 300);
}; // 延迟1000毫秒
</script>

<style scoped lang="less"></style>
